<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="static/plugins/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="static/css/user.css">
		<script src="static/js/leftNav.js"></script>
	</head>
	<body>
		<!-- 导航模块 -->
		<div class="nav layui-side " >
		<ul class="layui-side  top_tab layui-bg-gray">
			<p style="width: 100%;text-align: center"><img class="layui-nav-img  " id="user-info-face" src="static/images/face.jpg"/></p>
			<p style="width: 100%;text-align: center" ><span id="username"  class="user-info-name">{{name}}</span></p>
			<!--个人消息-->
			<li class="layui-nav-item  layui-action" ><a  class="layui-icon layui-icon-reply-fill" href="javascript:;" ></a></li>
			<!--应用中心-->
		 	 <li class="layui-nav-item  layui-action" ><a class="layui-icon layui-icon-app" href="javascript:;" ></a></li>
			<!--个人信息-->
		  	<li class="layui-nav-item layui-action"><a class="layui-icon layui-icon-about" href="javascript:;" ></a></li>
			<!--个人设置-->
		  	<li class="layui-nav-item layui-action layui-this" ><a class="layui-icon layui-icon-set-fill" href="javascript:;" id="setting" ></a></li>
			<!--退出-->
		 	 <li class="layui-nav-item layui-action" ><a class="layui-icon layui-icon-return" href="index.html" id="close" ></a></li>
		</ul>
		</div>
		<div style="margin: 200px auto auto 340px;width: 100%" ><h1>基本资料</h1></div>
		<div class="childrenBody" style="margin-top: 20px  ;width: 80%">
		<form class="layui-form">
			<div class="user_left">

				<div class="layui-form-item">
					<div class="layui-input-block">
						<input class="layui-input layui-disabled" disabled type="text" value="用户">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input class="layui-input" lay-verify="required" placeholder="请输入昵称" type="text" value="">
					</div>
				</div>
				<div class="layui-form-item" pane="">
					<div class="layui-input-block">
						<input checked="" name="sex" title="男" type="radio" value="男">
						<input name="sex" title="女" type="radio" value="女">
						<input name="sex" title="保密" type="radio" value="保密">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input class="layui-input" lay-verify="required|phone" placeholder="请输入手机号码" type="tel" value="">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input class="layui-input" lay-verify="required|date"
							   id="getTime" placeholder="请输入出生年月" type="text"
							   value="">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<select lay-filter="province" name="province">
							<option value="">请选择省</option>
						</select>
					</div>
					<div class="layui-input-block" style="margin-top: 10px">
						<div class="layui-input-inline">
							<select disabled lay-filter="city" name="city">
								<option value="">请选择市</option>
							</select>
						</div>
						<div class="layui-input-inline">
							<select disabled lay-filter="area" name="area">
								<option value="">请选择县/区</option>
							</select>
						</div>

					</div>

				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<input class="layui-input" lay-verify="required|email" placeholder="请输入邮箱" type="text" value="">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<textarea class="layui-textarea" placeholder="请输入内容"></textarea>
					</div>
				</div>
			</div>
			<div class="user_right">
				<img class="layui-circle" id="userFace" src="">
				<p></p>
				<button class="layui-btn userFace" lay-data="{url: './static/images/face.jpg'}">更换头像</button>
			</div>
			<div class="layui-form-item" style="margin-left: 5%;">
				<div class="layui-input-block">
					<button class="layui-btn" lay-filter="changeUser" lay-submit="">更新资料</button>
					<button class="layui-btn layui-btn-primary" type="reset">重置</button>
				</div>
			</div>
		</form>
		</div>

		  <table></table>

		<script src="static/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/address.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var areaData = address;
			var $form;
			var form;
			var $;
			layui.use(['form', 'layer', 'upload', 'laydate'], function () {
				form = layui.form;
				var layer = layer;
				//var layer = parent.layer === undefined ? layui.layer : parent.layer;
				$ = layui.jquery;
				$form = $('form');
				laydate = layui.laydate;
				var upload = layui.upload;
				loadProvince();

				laydate.render({
					elem: '#getTime' //指定元素
				});

				upload.render({
					elem: '.userFace'
					,done: function(res, index, upload){
						//获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
						var item = this.item;
					}
				});


				//添加验证规则
				form.verify({
					oldPwd: function (value, item) {
						if (value != "123456") {
							return "密码错误，请重新输入！";
						}
					},
					newPwd: function (value, item) {
						if (value.length < 6) {
							return "密码长度不能小于6位";
						}
					},
					confirmPwd: function (value, item) {
						if (!new RegExp($("#oldPwd").val()).test(value)) {
							return "两次输入密码不一致，请重新输入！";
						}
					}
				})
				//判断是否修改过头像，如果修改过则显示修改后的头像，否则显示默认头像
				if (window.sessionStorage.getItem('userFace')) {
					$("#userFace").attr("src", window.sessionStorage.getItem('userFace'));
				} else {
					$("#userFace").attr("src", "./static/images/face.jpg");
				}

				//提交个人资料
				form.on("submit(changeUser)", function (data) {
					var index = layer.msg('提交中，请稍候', {icon: 16, time: false, shade: 0.8});
					setTimeout(function () {
						layer.close(index);
						layer.msg("提交成功！");
					}, 2000);
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				})

				//修改密码
				form.on("submit(changePwd)", function (data) {
					var index = layer.msg('提交中，请稍候', {icon: 16, time: false, shade: 0.8});
					setTimeout(function () {
						layer.close(index);
						layer.msg("密码修改成功！");
						$(".pwd").val('');
					}, 2000);
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				})

				$.ajax({
					url: 'http://localhost:8080/tourism-user-api/user/info',
					type: 'POST',
					dataType: 'json',
					/* contentType: 'application/json', */
					xhrFields: {
						withCredentials: true
					},
					success: function (resData) {
						if (resData.data!=null) {
							new Vue({
								el: '#username',
								data:{
									name:resData.data.nickname
								}
							})
						}
						return false;
					},
					error: function (XMLHttpRequest, textStatus, errorThrown) {
						window.location.href = "login.html";
					}
				});
			});
			//加载省数据
			function loadProvince() {
				var proHtml = '';
				for (var i = 0; i < areaData.length; i++) {
					proHtml += '<option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">' + areaData[i].provinceName + '</option>';
				}
				//初始化省数据
				$form.find('select[name=province]').append(proHtml);
				form.render();
				form.on('select(province)', function (data) {
					$form.find('select[name=area]').html('<option value="">请选择县/区</option>');
					var value = data.value;
					var d = value.split('_');
					var code = d[0];
					var count = d[1];
					var index = d[2];
					if (count > 0) {
						loadCity(areaData[index].mallCityList);
					} else {
						$form.find('select[name=city]').attr("disabled", "disabled");
					}
				});
			}

			//加载市数据
			function loadCity(citys) {
				var cityHtml = '<option value="">请选择市</option>';
				for (var i = 0; i < citys.length; i++) {
					cityHtml += '<option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '">' + citys[i].cityName + '</option>';
				}
				$form.find('select[name=city]').html(cityHtml).removeAttr("disabled");
				form.render();
				form.on('select(city)', function (data) {
					var value = data.value;
					var d = value.split('_');
					var code = d[0];
					var count = d[1];
					var index = d[2];
					if (count > 0) {
						loadArea(citys[index].mallAreaList);
					} else {
						$form.find('select[name=area]').attr("disabled", "disabled");
					}
				});
			}

			//加载县/区数据
			function loadArea(areas) {
				var areaHtml = '<option value="">请选择县/区</option>';
				for (var i = 0; i < areas.length; i++) {
					areaHtml += '<option value="' + areas[i].areaCode + '">' + areas[i].areaName + '</option>';
				}
				$form.find('select[name=area]').html(areaHtml).removeAttr("disabled");
				form.render();
				form.on('select(area)', function (data) {
					//console.log(data);
				});
			}
		</script>
	</body>
</html>
